{% extends 'mobile/base_mobile.html' %}
{% load staticfiles %}
{% load my_filters %}
{% block title %}
    详情页-{{ product.title }}
{% endblock %}
{% block content %}
    {% autoescape off %}
        <body>
        <style>
            body {
                text-align: center;
                color: white;
            }

            .top_area {
                background-color: {{ artical_color|default:'#e20e35'}};
                border-radius: 0 0 1rem 1rem;
                padding: 1rem;

            }

            .top_img {
                width: 100%;
                border-radius: 1rem;
            }

            .super_time_style {
                border-radius: 5px;
                padding: 3px;
            }

            .in_one {
                word-break: keep-all;
                white-space: nowrap;
                padding-top: 1rem;
                color: black;
            }

            .act_main {
                position: relative;
                top: -4rem;
                background-color: #faf9f9;
                margin: 0 1rem;
                box-shadow: 2px 25px 15px rgba(104, 103, 103, 0.39);
            }

            .desc img {
                width: 100%;
            }

            .act_main .joiner_logo {
                position: relative;
            {#top: 1rem;#} width: 2.625rem;
                height: 2.625rem;
                border-radius: 50%;
                box-shadow: 2px 5px 5px rgba(104, 103, 103, 0.39);
                margin: 0 1rem;
            }

            .title {
                padding: 2.625rem 0 120px 0;
                font-size: 1.1rem;
                font-weight: 500;
            }

            .joiner {
                position: relative;
                top: -2rem;
                padding-bottom: 1rem;
            }

            .price_text {
                font-weight: 500;
                position: relative;
                top: 2rem;
                color: {{ artical_color|default:'#e20e35'}};
                padding: 1rem;
            }

            .join_btn {
                position: relative;
                top: -2rem;
                width: 60%;
                background-color: {{ artical_color|default:'#e20e35'}};
                border-radius: 1.25rem;
                padding: .5rem;
                font-weight: 500;
                margin: 0 auto 1.5rem auto;
                box-shadow: 2px 15px 15px rgba(104, 103, 103, 0.39);
            }

            .solution_intro {
                position: relative;
                top: -2rem;
                border-radius: .5rem;
            }

            .inventory_desc {
                display: block;
                margin: .625rem;
                font-weight: 500;
            }

            .text_important {
                position: relative;
                color: {{ artical_color|default:'#e20e35'}};
                font-size: 1.2em;
            }

            .title_detail {
                width: 50%;
                margin: 2rem auto .5rem auto;
            }

            p {
                padding: 10px 1rem 10px 1rem;
            }

            .desc {
                color: black;
                width: 95%;
                margin: 0 auto 0 auto;
            }

            .solution_img {
                width: 71%;
            }

            .solution_detail {
                width: 95%;
            }

            .time_black {
                color: black;
            }

            .cover_all {
                position: fixed;
                justify-content: center;
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                height: 100%;
                z-index: 10;
                background: rgba(0, 0, 0, 0.7)
            }

            .join_info_model {
                background-color: #fff;
                width: 80%;
                border-radius: 30px;
                color: #666;
            }

            .join_info_model * {
                padding: 20px;
                margin: 15px;
                border-radius: 10px;
            }

            .info_notification {
                color: {{ artical_color|default:'#e20e35'}};
            }

            .join_info_model input {
                border: 1px solid #555;
                font-size: 1rem;
                color: #888;
            }

            .model_title {
                font-size: 1.25rem;
                font-weight: 700;
            }

            div .info_input {
                text-align: center;
                width: 80%;
                line-height: 1.25rem;
                border-radius: 20px;
                background-color: #ccc;
            }

            div .buy_number {
                text-align: center;
                line-height: 1.25rem;
                border-radius: 20px;
                background-color: #ccc;
            }

            .info_submit {
                width: 60%;
                font-size: 36px;
                background-color: {{ artical_color|default:'#e20e35'}};
                border-radius: 50px;
                color: white;
                font-weight: 500;
                margin: 30px auto;
            }

            .close_btn {
                position: relative;
            {#top: -8rem;#} display: block;
                width: 100px;
                height: 100px;
                margin: 0 auto;
            }

            .close_btn_div {
                width: 100%;
            }

            input.receiver_input {
                display: none
            }

            input.receiver_input:checked + label {
                border: 3px solid #e20e35;

            }

            label.receiver_label {
                border: 1px solid;
                display: inline-block;
                font: 30px/50px "微软雅黑";
                text-align: center;
            }
        </style>

        <div class="cover_all">
            <!-- 参团填写信息 -->
            <div class="join_info_model">
                <form class="join_info_form">
                    {% csrf_token %}
                    <input type="hidden" name="id" value="{{ product.id }}">
                    <input type="hidden" name="price_discount" value="{{ product.price_discount }}">
                    <input type="hidden" name="amount" value="{{ product.price_discount }}">
                    <div class="model_title">选择或新增收货信息</div>
                    <div class="info_notification">所留信息不公开，仅用于活动兑换后商家联系</div>
                    <div><input name="name" class="info_input" placeholder="输入您的姓名"/></div>
                    <div><input name="phone" class="info_input" placeholder="输入您的电话号码"/></div>
                    <div>
                        <label for="number">数量</label>
                        <input name="number" type="number" class="info_input" id="number" placeholder="" value="1"/>
                    </div>
                    {#                    {% for receiver in user.get_address_list %}#}
                    {#                        <input class="receiver_input" {% if forloop.first %}checked{% endif %} type="radio"#}
                    {#                               name="reveiver"#}
                    {#                               id="{{ receiver.id }}"#}
                    {#                               style=""#}
                    {#                               value="{{ receiver.id }}"/>#}
                    {#                        <label class="receiver_label" for="{{ receiver.id }}"#}
                    {#                               style="">#}
                    {#                            {{ receiver.name }}-{{ receiver.phone }}-{{ receiver.address|default:'空' }}#}
                    {#                        </label>#}
                    {#                    {% endfor %}#}
                    {#                    <input class="receiver_input" type="radio"#}
                    {#                           id="new_receiver"#}
                    {#                           name="reveiver"/>#}
                    {#                    <label class="receiver_label" for="new_receiver"#}
                    {#                           style="">#}
                    {#                        <a class="new_receiver">+新增收货信息</a>#}
                    {#                    </label>#}
                    <div class="info_submit">
                        <span class=""
                              onclick="join_now(this, '{{ product.shop_id }}')">完&nbsp;&nbsp;&nbsp;&nbsp;成</span>
                    </div>
                </form>
            </div>
            <div class="close_btn_div">
                <img src="{% static 'images/close.png' %}" class="close_btn" onclick="$('.cover_all').slideUp(50);">
            </div>
        </div>
        {% if product.music %}
            <div class="music_logo">
                <img src="{% static 'images/music.png' %}">
            </div>

            <!--音乐按钮-->
            <div class="music-bt rotate" id="audio_btn">
                <audio loop hidden id="media" type="audio/mpeg" controls="controls">
                    <source src="{{ product.get_music_url }}">
                    您的浏览器不支持 audio 标签。
                </audio>
            </div>
        {% endif %}
        {% include 'mobile/float_menu.html' %}
        <div class="top_area">
            <img class="top_img" src="{{ product.get_image_url }}">
            <p class="title">{{ product.title }}</p>
        </div>
        <div class="act_main">
            <div class="main_joiner in_one">
                <img class="joiner_logo" src="{{ product.shop.get_logo_url }}">
            </div>
            <div class="main_joiner in_one">
{#                已售<span class="text_important">39</span>份,#}
                剩<span class="text_important">{{ product.inventory }}</span>份
            </div>
            <p class="inventory_desc in_one">
                <span class="text_important">售价：￥ {{ product.price_discount|div100 }}</span>/
                <span class="" style="color: #2C2C2C;"><s>{{ product.price_original|div100 }}</s></span>
            </p>
            <div class="joiner">

            </div>
        </div>
        <div class="join_btn" onclick="show_join_form(this)">
            立即购买
        </div>

        <div class="desc " id="desc">
            <div class="title_detail">
                <img src="{% static 'images/act_detail.png' %}">
            </div>
            <div class="content">{{ product.desc }}</div>
        </div>

        <script>
            function timer(element, card_time) {

                console.log(card_time)
                element.downCount({
                    //时间格式转换
                    date: card_time,
                    offset: +8 //抵消，减去时间差
                }, function () {
                    location.reload()
                });
            }

            $(".music_logo").click(function () {
                playPause()
                if ($(this).hasClass('super_round') == false) {
                    $(this).addClass('super_round')
                } else {
                    $(this).removeClass("super_round")
                }
            })
            $(function () {
                $('.cover_all').hide();
                if ('{{ product.has_start }}' == 'True' && '{{ product.has_end }}' == 'False') {
                    timer($(".down_count"), '{{ product.end_time|date:"m/d/Y H:i:s" }}');
                } else if ('{{ product.has_start }}' == 'False') {
                    timer($(".down_count"), '{{ product.start_time|date:"m/d/Y H:i:s" }}');
                } else {
                    console.log('已结束！')
                }
                {% if product.music %}
                    $(".music_logo").click()
                {% endif %}
            });

            function show_join_form(e) {
                $('.cover_all').slideDown(50);
                let model_number = $(e).prev().attr('model_number');
                let model_price = $(e).prev().attr('model_price');
                $('input[name="model_number"]').val(model_number);
                $('input[name="model_price"]').val(model_price);
            }

            /* 音乐播放暂停 */
            function playPause() {
                var music = document.getElementById('media');
                if (music.paused) {
                    music.play();
                } else {
                    music.pause();
                }

            }
        </script>
        {% if sign %}
            <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
            <script type="text/javascript">
                wx.config({
                    debug: false,
                    appId: '{{ sign.appId}}',
                    timestamp: {{ sign.timestamp }},
                    nonceStr: '{{ sign.nonceStr }}',
                    signature: '{{ sign.signature }}',
                    jsApiList: [
                        'onMenuShareAppMessage',
                        'hideMenuItems',
                        'chooseWXPay'
                    ]
                });

                wx.ready(function () {
                    // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                    wx.checkJsApi({
                        jsApiList: [
                            'onMenuShareAppMessage',
                            'hideMenuItems'
                        ],
                        success: function (res) {
                        }
                    });

                    wx.hideMenuItems({
                        menuList: ['menuItem:share:timeline']
                    });

                    // 2. 分享接口
                    // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
                    wx.onMenuShareAppMessage({
                        title: '{{ product.title|linebreaksbr|striptags }}',
                        link: '{{ sign.share_url|safe }}',
                        desc: '这波操作稳了！我参加了“{{ product.title|linebreaksbr|striptags }}”的活动，快来参团！',
                        imgUrl: '{{ product.get_image_url }}',
                        trigger: function (res) {
                        },
                        success: function (res) {
                            //share_link_count();
                        },
                        cancel: function (res) {
                        },
                        fail: function (res) {
                        }
                    });
                });

                function pay_for_wx(obj, order, amount, shop) {

                    // 请求微信JS支付参数
                    $.ajax({
                        url: "{{ product.get_pay_url }}",
                        method: "post",
                        data: {
                            order: order,
                            amount: amount,
                            channel: 'JSAPI',
                            openid: $.cookie(shop) || '',
                            csrfmiddlewaretoken: $.cookie("csrftoken")
                        },
                        beforeSend: function (req) {
                            $(obj).attr('disabled', 'disabled');
                            req.setRequestHeader("X-CSRFToken", $.cookie("csrftoken"));
                        },
                        success: function (data) {
                            console.log(data);
                            if (data['status'] != 0) {
                                $(obj).removeAttr('disabled');
                                alert(data['detail']);
                            } else {
                                var params = JSON.parse(data['detail']['params']);
                                // 进行微信支付
                                wx.chooseWXPay({
                                    timestamp: parseInt(params['timeStamp']),
                                    nonceStr: params['nonceStr'], // 支付签名随机串，不长于 32 位
                                    package: params['package'], // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                    signType: params['signType'], // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                    paySign: params['paySign'], // 支付签名
                                    success: function (res) {
                                        {#alert('支付完成',);#}
                                        $(obj).removeAttr('disabled');
                                        location.reload();
                                    },
                                    cancel: function (res) {
                                        {#alert('取消支付');#}
                                        location.reload();
                                    },
                                    fail: function (res) {
                                        {#alert(res.errMsg);#}
                                        location.reload();
                                    }
                                });
                            }
                        },
                        complete: function (data) {
                            console.log(data);
                            $(obj).removeAttr('disabled');
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            $(obj).removeAttr('disabled');
                            alert(XMLHttpRequest.status);
                            alert(XMLHttpRequest.readyState);
                            alert(textStatus);
                        }
                    });
                }

                function join_now(obj, shop) {
                    let data = $('.join_info_form').serialize();
                    let amount = $('input[name="price_discount"]').val() * $('input[name="number"]').val();
                    $('input[name="amount"]').val(amount);
                    console.log(data)
                    $.ajax({
                        url: '{{ product.get_buy_url }}',
                        async: false,//这一步是非常重要的，作用是设置为同步执行
                        type: "POST",
                        data: $('.join_info_form').serialize(),
                        dataType: "json",
                        success: function (res) {
                            console.log(res);
                            if (res.status == 0) {
                                if (res.detail.pay == 'self') {
                                    pay_for_wx(obj, res.detail.order, res.detail.amount, shop);
                                } else {
                                    window.location.href = res.detail.pay_url;
                                }
                            } else {
                                alert(res.detail);
                                location.reload()
                            }
                        },
                        error: function (res) {
                            alert(res)
                        }
                    });
                }
            </script>
        {% endif %}
        </body>
    {% endautoescape %}
{% endblock %}
